<template>
	<el-card class="box-card">
		<el-row :gutter="20">
			<el-col :span="5">
				<el-input v-model="formData.title" placeholder="关键字" size="medium"></el-input>
			</el-col>
			<el-col :span="5">
				<el-select v-model="formData.label_name" placeholder="请选择标签" size="medium">
					<el-option v-for="item in options" :key="item.id" :label="item.label_name" :value="item.label_name"> </el-option>
				</el-select>
			</el-col>
			<el-col :span="5">
				<el-input v-model="formData.username" placeholder="账号" size="medium"></el-input>
			</el-col>
			<el-col :span="7">
				<el-date-picker
					v-model="formData.createtime"
					type="datetime"
					value-format="yyyy-MM-dd HH:mm:ss"
					style="width: 285px"
					placeholder="发表时间"
                    size="medium"
				></el-date-picker>
			</el-col>
			<el-col :span="2">
				<el-button type="primary" @click="filter" size="medium">搜索</el-button>
			</el-col>
		</el-row>
		<search :tableData="tableData" :options="options" :type="type" @del="del" />
	</el-card>
</template>

<script>
import { DetowntalkList, Getlabel,addCondition } from '@/api/towntalk';
export default {
	name: 'towntalk_search',
	data() {
		return {
			formData: {
				title: '',
				label_name: '',
				createtime: '',
			},
			tableData: [], // 列表数据
			options: [], // 标签数据
			type: 1,
		};
	},
	components: {},
	created() {
		this.GttowntalkList();
	},
	activated() {
		this.GttowntalkList();
	},
	mounted() {},
	methods: {
		async GttowntalkList() {
			const  data  = await Getlabel();
			this.options = data;
		},
		async del() {
            await this.$confirm('确定要删除?', '提示', { type: 'warning' });
			try {
				await DetowntalkList();
			} catch (err) {
				console.log(err.message);
			}
		},
		async filter(){
			const data= await addCondition(this.formData)
			this.tableData=data
		}
	},
	computed: {},
	watch: {},
};
</script>

<style scoped>
.box-card {
    padding: 20px;
}
</style>
